<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div>
  <div *ngIf="dcrIsEnabled && templateIsEnabled">
    <div fxLayout="column" fxFlex="70">
      <div class="gv-form-section" fxLayout="column">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>

        <table mat-table [dataSource]="apps" matSort matSortActive="template" matSortDirection="desc">
          <!-- ID Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
            <td mat-cell *matCellDef="let client"> {{client.id}} </td>
          </ng-container>

          <!-- Client ID Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Application name </th>
            <td mat-cell *matCellDef="let client"> {{client.name}} </td>
          </ng-container>

          <!-- Name Column -->
          <ng-container matColumnDef="clientId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> OAuth 2.0 Client ID </th>
            <td mat-cell *matCellDef="let client"> {{client.clientId}} </td>
          </ng-container>

          <!-- Description Column -->
          <ng-container matColumnDef="template">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Is Template </th>
            <td mat-cell *matCellDef="let client">
              <mat-slide-toggle matTooltip="{{client.template ? 'Disable template ?' : 'Enable template ?'}}"
                                (change)="$event ? applyChange(client, $event) : null"
                                [checked]="client.template" [disabled]="readonly">
              </mat-slide-toggle>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
      </div>
    </div>

    <div class="gv-page-description" fxFlex>
      <h3>Application templates</h3>
      <div class="gv-page-description-content">
        <p>
          This section is used to define some applications as a template when registering new app through the dynamic client registration endpoint.
          And thus, they will no longer be able to be used for authentication purpose.
        </p>
        <small><i>Each template id are exposed as <b>software_id</b> under the registration_templates_endpoint defined into the openid discovery.</i></small>
      </div>
    </div>
  </div>
  <app-emptystate *ngIf="!(dcrIsEnabled && templateIsEnabled)"
                  [message]="emptyStateMessage"
                  [subMessage]="'This feature can be enable through the Settings tab.'">
  </app-emptystate>
</div>

